<template>
  <div>
    <!-- 添加切换按钮 -->
    <div class="container">
      <button @click="showKnowledges = !showKnowledges">
        {{ showKnowledges ? '显示热门文章列表' : '显示热门知识库列表' }}
      </button>
    </div>

    <div class="container">
      <h1>首页</h1>
    </div>

    <!-- 根据状态显示对应的列表 -->
    <div v-if="showKnowledges" class="container">
      <!-- 展示热门知识库 -->
      <HomeList :data="collectedKnowledges" title="热门知识库列表" :pageSize="pageSize" @page-change="changeKnowledgesPage">
        <!-- 自定义列表项展示 -->
        <template #default="{item }">
          <div style="margin: 10px;">
            <span class="label">作者:</span>
            <span class="value">{{ item.creatorName }}</span>
          </div>
          <LibraryCard :library="item" @click="handleKnowledgeCardClick(item)" class="clickable-card">
          </LibraryCard>
        </template>
      </HomeList>
    </div>

    <div v-else class="container">
      <!-- 展示热门文章 -->
      <HomeList :data="collectedArticles" title="热门文章列表" :pageSize="articlePageSize" @page-change="changeArticlesPage">
        <!-- 自定义列表项展示 -->
        <template #default="{item }">
          <ArticleCard :article="item" @click="handleArticleCardClick(item)" class="clickable-card">
          </ArticleCard>
        </template>
      </HomeList>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import require from '../require';
import { onMounted } from 'vue';
// 引入 HomeList 组件
import HomeList from '../components/HomeList.vue';
import { UserStore } from '../store/user';
import { useRouter } from 'vue-router';
// 引入 LibraryCard 和 ArticleCard 组件
import LibraryCard from '../components/LibraryCard.vue';
import ArticleCard from '../components/ArticleCard.vue';

const router = useRouter();
// 控制显示哪个列表
const showKnowledges = ref(true); 

// 知识库分页相关
const pageSize = ref(10); 
const currentPage = ref(1); 
const total = ref(10); 
const collectedKnowledges = ref([]);

// 文章分页相关
const articlePageSize = ref(10); 
const articleCurrentPage = ref(1); 
const articleTotal = ref(10); 
const collectedArticles = ref([]);

// 页面加载完成后获取数据
onMounted(async () => {
  collectedKnowledges.value = await queryCollectedLibrary(1, pageSize.value);
  
  collectedArticles.value = await queryCollectedArticle(1, articlePageSize.value);
  
  console.log(collectedKnowledges.value);
  console.log(collectedArticles.value);
});

const queryCollectedLibrary = async (start, size) => {
  const res = await require.post('user/queryHotLibrary', {
    start: start,
    size: size,
    sortBy: 'likedAmounts', // 按点赞数排序
    order: 'desc' // 降序排列
  });
  const alist = [];
  for (let i = 0; i < res.libraryAmount; i++) {
    const e = res.libraryList[i];
    alist.push({
      libraryId: e.libraryId,
      name: e.libraryName,
      description: e.description,
      articleCount: e.articleAmounts,
      createTime: e.createTime,
      updateTime: e.updateTime,
      creatorId: e.creatorUser.userId,
      isPublic: e.isPublic,
      likedAmounts: e.likedAmounts, 
      collectedAmounts: e.collectedAmounts,
      commentedAmounts: e.commentedAmounts,
      currentUserCollect: e.currentUserCollect,
      currentUserLike: e.currentUserLike,
      creatorName: e.creatorUser.nickName,
      creatorId: e.creatorUser.userId,
    })
  }
  return alist
}

const queryCollectedArticle = async (start, size) => {
  const res = await require.post('user/queryHotArticle', {
    start: start,
    size: size,
    sortBy: 'likedAmounts', // 按点赞数排序
    order: 'desc' // 降序排列
  });
  const alist = [];
  for (let i = 0; i < res.articleAmount; i++) {
    const e = res.articleList[i];
    alist.push({
      articleId: e.articleId,
      title: e.title,
      author: e.author.nickName,
      updateTime: e.updateTime,
      likedAmounts: e.likedAmounts, 
      collectedAmounts: e.collectedAmounts,
      commentedAmounts: e.commentedAmounts,
      currentUserCollect: e.currentUserCollect,
      currentUserLike: e.currentUserLike,
      creatorName: e.author.nickName,
      creatorId: e.author.userId,
    })
  }
  return alist
}

const changeKnowledgesPage = async (page) => {
  console.log(`当前知识库页码已变更为: ${page}`);
  collectedKnowledges.value = [];
  collectedKnowledges.value = await queryCollectedLibrary((page - 1) * pageSize.value + 1, pageSize.value);
  console.log(collectedKnowledges.value);
}

const changeArticlesPage = async (page) => {
  console.log(`当前文章页码已变更为: ${page}`);
  collectedArticles.value = [];
  collectedArticles.value = await queryCollectedArticle((page - 1) * articlePageSize.value + 1, articlePageSize.value);
  console.log(collectedArticles.value);
}

// 处理知识库卡片点击事件
const handleKnowledgeCardClick = (row) => {
  console.log('点击的收藏知识库信息:', row);
  router.push({ name: 'HisLibrary', query: { id: row.libraryId } });
};

// 处理文章卡片点击事件
const handleArticleCardClick = (article) => {
  const r = router.resolve({
    name: 'HisArticle', 
    query: {
      articleId: article.articleId, 
    }
  });
  window.open(r.href, '_blank');
};
</script>

<style scoped>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
}
.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.clickable-card {
    cursor: pointer;
}

.clickable-card:hover {
    background-color: #f0f0f0;
}

.label {
    font-weight: bold;
    margin-right: 10px;
    text-align: right;
    color: #606266;
    margin-top: 10px ;
}
</style>
